<template>
  <div>
    <LandlordNavigation style="width: 14vw;" :selected="selected" class="inline-box" @changeView="changeView"></LandlordNavigation>
    <component style="width: 86vw;" @startGame="startGame" @event="currentComponent.event" :user="user" class="inline-box" :is="currentComponent.name" :ws="ws"></component>
  </div>
</template>

<script>
import LandlordNavigation from "@/components/game/landlord/navigationView/LandlordNavigation";
import LandlordRoomSearch from "@/components/game/landlord/searchRoomView/LandlordRoomSearch";
import LandlordCreateRoom from "@/components/game/landlord/createRoomView/LandlordCreateRoom";
export default {
  name: "LandlordView",
  components: {LandlordRoomSearch, LandlordNavigation, LandlordCreateRoom},
  props:{
    user:{
      required: true
    },
    ws:{},
  },
  data(){
    return{
      selected:0,
      roomList:null,
      currentComponent:null,
      components:[
          {
            name:"LandlordRoomSearch",
            event:function (){}
          },
        {
          name:"LandlordCreateRoom",
          event:function (){}
        }
      ],
    }
  },
  beforeMount() {
    this.currentComponent=this.components[0];
    this.components[0].event=()=>this.toRoom();
    this.components[1].event=()=>this.createRoom();
  },
  methods:{
    changeView(index){
      this.currentComponent=this.components[index];
      this.selected=index;
    },
    createRoom(value){
      if(value){
        //房间创建成功
        this.changeView(1);
      }
    },
    toRoom(){
      this.changeView(1);

    },
    startGame(game){
      this.$emit("startGame", game);
    }
  },
}
</script>

<style scoped>
div{
  text-align: center;
}
.inline-box{
  display: inline-block;
  text-align: center;
  vertical-align:top;
}
</style>
